<script setup lang="ts">
import { computed } from 'vue'

// 定义色彩方案类型
type ColorScheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning'

// 定义预设色彩方案
const colorSchemes: Record<ColorScheme, Props> = {
  primary: {
    bgColor: 'bg-blue-500',
    hoverBgColor: 'hover:bg-blue-600',
    textColor: 'text-white',
    darkBgColor: 'dark:bg-blue-600',
    darkHoverBgColor: 'dark:hover:bg-blue-700',
    darkTextColor: 'dark:text-white'
  },
  secondary: {
    bgColor: 'bg-gray-500',
    hoverBgColor: 'hover:bg-gray-600',
    textColor: 'text-white',
    darkBgColor: 'dark:bg-gray-600',
    darkHoverBgColor: 'dark:hover:bg-gray-700',
    darkTextColor: 'dark:text-white'
  },
  success: {
    bgColor: 'bg-green-500',
    hoverBgColor: 'hover:bg-green-600',
    textColor: 'text-white',
    darkBgColor: 'dark:bg-green-600',
    darkHoverBgColor: 'dark:hover:bg-green-700',
    darkTextColor: 'dark:text-white'
  },
  danger: {
    bgColor: 'bg-red-500',
    hoverBgColor: 'hover:bg-red-600',
    textColor: 'text-white',
    darkBgColor: 'dark:bg-red-600',
    darkHoverBgColor: 'dark:hover:bg-red-700',
    darkTextColor: 'dark:text-white'
  },
  warning: {
    bgColor: 'bg-yellow-500',
    hoverBgColor: 'hover:bg-yellow-600',
    textColor: 'text-white',
    darkBgColor: 'dark:bg-yellow-600',
    darkHoverBgColor: 'dark:hover:bg-yellow-700',
    darkTextColor: 'dark:text-white'
  }
}

// 修改 Props 接口
interface Props {
  bgColor?: string
  hoverBgColor?: string
  textColor?: string
  darkBgColor?: string
  darkHoverBgColor?: string
  darkTextColor?: string
  activeBgColor?: string
  darkActiveBgColor?: string
  type?: ColorScheme // 新增 type 属性
}

const props = withDefaults(defineProps<Props>(), {
  bgColor: 'bg-gray-100',
  hoverBgColor: 'hover:bg-gray-200',
  textColor: 'text-gray-700',
  darkBgColor: 'dark:bg-gray-700',
  darkHoverBgColor: 'dark:hover:bg-gray-600',
  darkTextColor: 'dark:text-gray-300',
  activeBgColor: 'active:bg-gray-300',
  darkActiveBgColor: 'dark:active:bg-gray-500',
  type: undefined // 默认值为 undefined
})

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void
}>()

const buttonClasses = computed(() => {
  const scheme = props.type ? colorSchemes[props.type] : props
  return [
    'flex items-center justify-center gap-2 p-5px rounded-lg transition-colors duration-200 cursor-pointer',
    scheme.bgColor,
    scheme.hoverBgColor,
    scheme.activeBgColor, // 添加激活状态的背景色
    scheme.textColor,
    scheme.darkBgColor,
    scheme.darkHoverBgColor,
    scheme.darkActiveBgColor, // 添加暗色模式下激活状态的背景色
    scheme.darkTextColor
  ]
})
</script>

<template>
  <div :class="buttonClasses" @click="$emit('click', $event)">
    <slot name="icon"></slot>
    <slot></slot>
  </div>
</template>